<template>
  <!-- <div class="FD">
        <el-button @click="ss">name</el-button>
        <el-form :model="ruleForm" label-width="auto" style="max-width: 600px;margin: auto;" ref="ruleFormRef"
            :rules="rules" status-icon>
            <div id="one">
                <p style="font-weight: bold;font-size: 40px;">欢迎登录</p>
                <p>
                    <el-form-item label="账号：" prop="name" style="margin-left: 100px">
                        <el-input v-model="ruleForm.name" style="width: 240px" />
                    </el-form-item>
                </p>
                <p>
                    <el-form-item label="密码：" prop="pass" style="margin-left: 100px;">
                        <el-input v-model="ruleForm.pass" style="width: 240px" :type="showPass ? 'text' : 'password'">
                            <template #suffix>
                                <el-icon @click="showPass = !showPass"><View /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                </p>
                <el-button type="primary" style="width:290px;margin-top: 20px;margin-left: 10px;" @click="resetForm">登录</el-button>
                <p class="wj" style="margin-left: 30px;"><span @click="WJMM" style="margin-left:160px">忘记密码</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                        @click="zc">注册</span></p>
            </div>
        </el-form>
    </div> -->
  <div class="login-container">
    <div class="login-data">
      <div class="login-text">
        <h2>WeZhi唯智</h2>
      </div>
      <div class="form-data">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon>
          <el-form-item prop="name">
            <el-input
              v-model="ruleForm.name"
              clearable
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              v-model="ruleForm.pass"
              clearable
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="tool">
        <div>
          <el-checkbox v-model="checked" @change="remenber">我已阅读并同意<span class="my_span">《用户隐私政策》</span></el-checkbox>
        </div>
      </div>
      <div class="butt">
        <el-button type="primary" @click="resetForm()" class="my_btn"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>


<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
// import { mapMutations, useStore } from 'vuex';
// import $http from "../axios/base.js";
import axios from "axios";
import { getUser } from "../axios/Login";

export default {
  name: "App",
  setup() {
    // const store = useStore();
    // const storeMutations = mapMutations(['setName'], store);
    let router = useRouter();
    let showPass = ref(false);
    let ruleForm = reactive({
      name: "",
      pass: "",
    });
    let rules = reactive({
      name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
    });
    let ruleFormRef = ref(null);
    const checked = ref();

    function WJMM() {
      alert("123");
    }
    function zc() {
      alert("666");
    }

    function resetForm() {
      if(!checked.value){
        ElMessage.warning("请勾选用户隐私政策 ")
        return;
      }
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          getUser(ruleForm.name, ruleForm.pass)
            .then((res) => {
              console.log(res.value);
              if (res.code == 1) {
                sessionStorage.setItem("token", res.token);
                sessionStorage.setItem("empId", res.value.emp_id);
                sessionStorage.setItem("empname", res.value.emp_name);
                router.push("/Main");
              } else {
                ElMessage.error("登录失败，用户名或密码错误！！！");
              }
            })
            .catch((err) => console.log(err));
        } else {
          ElMessage.error("登录失败，请联系客服！！！");
        }
      });
    }

    // function ss(){
    //     router.push("/666");
    // }

    return {
      WJMM,
      zc,
      resetForm,
      router,
      ruleForm,
      rules,
      ruleFormRef,
      showPass,
      checked,
    };
  },
};
</script>

<style scoped>
.my_btn {
  width: 300px;
}

.my_span {
  color: #409EFF;
}

.login-container {
  height: 98vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/bg.jpg');
  background-size: cover; /* 确保背景图片覆盖整个页面 */
  background-position: center; /* 将背景图片居中 */
}
.login-data {
  width: 300px;
  padding: 30px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-text {
  text-align: center;
}
.form-data {
  margin-top: 20px;
}
.tool {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.butt {
  margin-top: 20px;
}
.shou {
  color: #409EFF;
  cursor: pointer;
}
</style>